<!DOCTYPE html>
<!-- 导入动画库的css文件 -->
<link rel="stylesheet" href="./">
<link rel="icon" href="./2021_img/i8.png">
<html>
<head>
  <meta charset="UTF-8">
  <title>主页</title>
  <style>
    /* 初始化样式 */
    * {
      margin: 0;
      padding: 0;    
    }
    /* 清除列表样式 */
    ul,ol {list-style: none;}
    /* a标签去掉下划线 */
    .center ul li a {
      color: rgb(43, 166, 238);
      text-decoration: none;
    }
    .frame >div ul li a {
      color: rgb(252, 246, 246);
      text-decoration: none;
    }
    /* 清除浮动 */
    .clearfix::after{
      content: "";
      display: block;
      clear: both;
    }
    /* 定宽居中 */
    .center {
      width: 1110px;
      margin: auto;
    }
    .nav h1 {
      color: rgb(233, 141, 141);
      float: left;
      /* 加右外间距使h2左边有一段距离 */
      margin-right:10px ;
      /* 加行高使h2垂直居中 */
      line-height: 30px;
      margin-bottom: 30px;
      margin-top: 40px;
    }
    .nav ul {
      float: left;
      height: 50px;
      display: flex;
      margin: 30px auto;
      font-size: 16px;
    }
    .nav ul li {
      /* 给li宽和高 然后让她水平居中 垂直居中 */
      width: 120px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      transition: 2s;
      margin: 0px 20px;
      border-radius: 8px;
      background-color: rgb(156, 208, 238);
    }
    .nav ul li:hover {
      background-color:rgb(109, 189, 192);
    }
    .nav ul li:hover >a {
      color: #fff;      
    }
    .bg1 {
      width: 100%;
      height: 550px;
      background-image: url(./2021_img/pp8.jpg);
      background-size: cover;
      transition: 2s;
    }
    .bg1:hover {
      transform: scale(0.98);
    }
    /* 方法一:让3块div区域往上移动 */
    .block > div > div {
      width: 340px;
      height: 210px;
      /* 让原来竖着排列的3块div区域变成横向排列的行内块 */
      float: left;
      /* 3块div区域一起向上移40px(上外间距) */
      margin-top: -40px;
      border-radius: 6px;
    }
    /* 方法二:让3块div区域往上移动 */
    /* 使用相对定位:相对于父元素(block)进行定位 */
    /* .block {      
      position: relative;
      margin-top: -40px;      
    } */
    .block >div >div:nth-child(1){background-color: rgb(238, 248, 149);}
    .block >div >div:nth-child(2){background-color: rgb(98, 161, 243);}
    .block >div >div:nth-child(3){background-color: rgb(114, 243, 194);}
    .block {
      margin-left: 20px;
    }
    .frame h2 {
      color: rgb(77, 132, 233);
      padding: 10px;
    }
    .frame ul {
      /* 使用弹性布局,让ul容器装下(子元素)项目 */
      display: flex;
      /* 让ul换行 */
      flex-wrap: wrap;
      /* 两端对齐 */
      justify-content: space-between;
    }
    .frame ul li {
      width: 280px;
      /* 加下外间距,让li上下有间距 */
      margin-bottom: 30px;      
    }
    .frame ul li img {
      width: 230px;
      height:230px;
      /* 去掉图片的幽灵空白节点 避免与其他元素之间产生空白*/
      display: block;
      transition: 2s;
      border-radius: 6px;
      margin: 7px auto;
    }
    .frame ul li a {
      width: 250px;
      /* 让a标签变成行内块 (否则a标签是竖着排列)*/
      display: block;
      text-align: center;
      padding: 5px 0px;
      background-color: rgb(109, 189, 192);
      font-size: 16px;
      transition: 2s;
      border-radius: 6px;
      color: rgb(91, 186, 230);
      margin: 7px auto;
    }
    .frame ul li a:hover {
      background-color: rgb(77, 132, 233);
    }
    .frame ul li img:hover {
      transform: scale(0.93);
    }
    @keyframes move {
      0%{transform: translate(0,0);}
      40%{transform: translate(5px,5px);}
      90%{transform: scale(1.1);}
      100%{transform: translate(0px,0px);}
    }
    .frame ul li img {
      animation-name: move;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
    .bg1-txt h5{
      color: rgb(185, 122, 80);
    }
    .bg1-txt h2{
      color: rgb(58, 189, 206);
      margin: 10px auto;
    }
    .bg1 > div {
      height: 500px;
      /* background-color: pink; */
    }
    .bg1 > div .bg1-txt {
      position: relative;
      top:45%;
    }
    .bg1-txt h5 {
      margin: 15px auto;
      font-size: 16px;
    }
    .bg1-txt p {

      font-size: 20px;
      color: rgb(123, 170, 60);
    }
    .bg1-txt button {
      width: 120px;
      height: 40px;
      margin: 40px auto;
      background-color: rgb(34, 193, 214);
      border: 0px solid cornflowerblue;
      border-radius: 15px;
    }
    .bg1-txt button a {
      color: white;
    }
    /* 最下面的箭头 */
   #btn {
      display: block;
      width: 140px;
      height: 40px;
      color: #fff;
      font-size: 22px;
      border-radius: 5px;
      border: 0;
      background-color: rgb(49, 177, 182);
      margin: 30px auto;
    }
    .center ul input {
      font-size: 18px;
      width: 245px;
      height: 30px;
      /* background-color: rgb(146, 231, 224); */
      background-image: url(./2021_img/ss2.png);
      background-repeat: no-repeat;
      background-position: 97% 50%;
      border: 2px solid rgb(81, 138, 224);
      border-radius: 5px;
    }
    a {
     text-decoration: none;
    }
  </style>
</head>
<body>
<div class="nav">
  <div class="center clearfix">
    <h1>Flowers</h1>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">展览</a></li>
        <li><a href="#">看点</a></li>
        <li><a href="#">订阅</a></li>
        <input type="text" placeholder="search">
      </ul>
  </div>
</div>
<!-- 第一个大背景图 -->
<div class="bg1">
  <div class="center">
    <div class="bg1-txt">
      <h5>乐于发现美好</h5>
      <h2>憧憬小浪漫</h2>
      <p>布满星星的夜晚~~~</p>
      <button>
        <a href="./05.showing.html">查看更多</a>
      </button>
    </div>
  </div>
</div>
<!-- 背景图下面三块重要区域 -->
<div class="center">
  <div class="block">
    <div class="clearfix">
        <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>
<!-- 了解萌宠 -->
<div class="frame">
  <div class="center">
    <!-- 宠物展示 -->
    <h2>flower sea</h2>
    <!-- 六张宠物图片系列 -->
    <ul>
      <li>
        <img src="./2021_img/flower13.jpg" alt="">
        <a href="#">
          <h5>留住好时光</h5>
          <p>粉色雪球玫瑰</p>
        </a>
      </li>
      <li>
        <img src="./2021_img/flower14.jpg" alt="">
        <a href="#">
          <h5>梦幻星星</h5>
          <p>太阳花</p>
        </a>
      </li>
      <li>
        <img src="./2021_img/flower15.jpg" alt="">
        <a href="#">
          <h5>但愿是你</h5>
          <p>圣诞定制新品</p>
        </a>
      </li>
      <li>
        <img src="./2021_img/flower16.jpg" alt="">
        <a href="#">
          <h5>最珍贵的国宝动物</h5>
          <p>熊猫是丰腴富态猫科动物</p>
        </a>
      </li>
      <li>
        <img src="./2021_img/flower17.jpg" alt="">
        <a href="#">
          <h5>韩式系列</h5>
          <p>爱莎玫瑰</p>
        </a>
      </li>
      <li>
        <img src="./2021_img/flower18.jpg" alt="">
        <a href="#">
          <h5>真挚祝福</h5>
          <p>粘人的猫咪让人喜爱</p>
        </a>
      </li>
      <li>
        <img src="./2021_img/flower19.jpg" alt="">
        <a href="#">
          <h5>你最珍贵</h5>
          <p>香槟玫瑰</p>
        </a>
      </li>
      <li>
        <img src="./2021_img/flower20.jpg" alt="">
        <a href="#">
          <h5>一路向阳</h5>
          <p>花艺师打造</p>
        </a>
      </li>
      <li>
        <img src="./2021_img/flower21.jpg" alt="">
        <a href="#">
          <h5>阳光使者-韩式花篮</h5>
          <p>香槟色杨菊杆</p>
        </a>
      </li>   
    </ul>
    <!-- 向右翻页按钮 -->
    <button id="btn">
      <a href="./05.showing.html">→</a>
    </button>
  </div>
</div>
</body>
</html>